<template> 
    <div class="settlementDetailwrap">
        <div class="waybillInfo">
            <div class="titleH3">
                <i></i>
                <h3>结算信息</h3>
            </div>
            <ul class="feeInfo">
                <li><b>结算单号</b>：<span>{{settleInfo.settleId}}</span></li>
                <li><b>状态</b>：<span>{{settleInfo.settleStatus | status}}</span></li>
                <li><b>发票抬头</b>：<span>上海船奇物流有限公司</span></li>
                <li><b>结算量</b>：<i>{{(settleInfo.totSettleWeight*1).toFixed(3)}}</i><span>吨</span></li>
                <li><b>运费总额</b>：<i>{{(settleInfo.totTransAmount*1).toFixed(2)}}元</i></li>
                <li><b>杂费总额</b>：<i>{{(settleInfo.totOtherAmount*1).toFixed(2)}}元</i></li>
                <li class="count"><b>结算总额</b>：<i>{{(settleInfo.totSettleAmount*1).toFixed(2)}}元</i></li>
            </ul>
            <div class="detailedWrap">
                <div class="tit">
                    <div v-for="item in titNav" @click = "onNav(item.status)">
                        <span :class="{active : titActive == item.status}">{{item.txt}}</span>
                    </div>
                </div>
                <div class="settleCont" v-show="titActive == 1">
                    <div class="singerBox" v-for="item in transList" >
                        <div class="boxTitle clearfix">
                            <div class="left fl">运单号：{{item.voucherNum}}</div>
                            <div class="right fr">{{item.createDate}} </div>
                        </div>
                        <div class="addressList">
                            <div class="address clearfix">
                                <span class="fl add">{{item.startAddress}}</span>
                                <span class="iconTo">---</span>
                                <span class="fr add">{{item.endAddress}}</span>
                            </div>
                        </div>
                        <div class="border"></div>
                        <div class="info">
                            <div class="up clearfix">
                                <div class="left fl">结算量：{{(item.transWeight*1).toFixed(3)}}吨</div>
                                <div class="right fr">运价：{{(item.unitPrice*1).toFixed(2)}}元／吨</div>
                            </div>
                            <div class="down clearfix">
                                <div class="right fl">杂费：{{(item.otherAmount*1).toFixed(2)}}元</div>
                                <div class="right fr">运费总额：{{(item.settleAmount*1).toFixed(2)}}元</div>
                            </div>
                        </div>
                        
                    </div>
                </div>
                <!-- 发票明细 -->
                <div class="invoiceCont" v-show="titActive == 2">
                    <div class="freightInvoice">
                        <div class="titleH3">
                            <i></i>
                            <h3>运费发票</h3>
                        </div>
                        <div v-show="transTaxList.length">
                            <div class="infoBox" v-for="item in transTaxList"  >
                                <div class="up">
                                    <ul>
                                        <li>
                                            发票号:{{item.invoiceNum}}
                                        </li>
                                        <li>
                                            发票日期:{{item.invoiceDate}}
                                        </li>
                                        <li class="full">
                                            发票代码:{{item.invoiceBoxNum}}
                                        </li>
                                    </ul>
                                </div>
                                <hr>
                                <div class="down">
                                    <ul>
                                        <li class="full">税率：{{item.taxRate*100}}%</li>
                                        <li>税额：{{(item.invoiceTaxAmount*1).toFixed(2)}}元</li>
                                        <li>发票总额(含税):<i>{{(item.invoiceAmount*1).toFixed(2)}}元</i></li>
                                    </ul>
                                </div>
                            </div>
                           
                        </div>
                        <div class="nullData" v-show="!transTaxList.length">
                            <p>暂无内容</p>
                        </div>
                        
                        <div class="infoBox clearfix" v-show="attachmentInvoice.length !=0">
                            <div class="imgGroup" v-for="item in attachmentInvoice" >
                                <img class="wc-preview-img" :src="item.attachmentUrl" alt="加载失败" @click="appShowImg($event, imgInvoiceList,index)">
                            </div>
                        </div>
                    </div>
                    <!-- 杂费 -->
                    <div class="freightInvoice">
                        <div class="titleH3">
                            <i></i>
                            <h3>杂费发票</h3>
                        </div>
                        <div v-show="feeTaxList.length">
                            <div class="infoBox" v-for="item in feeTaxList" >
                                <div class="up">
                                    <ul>
                                        <li>
                                            发票号:{{item.invoiceNum}}
                                        </li>
                                        <li>
                                            发票日期:{{item.invoiceDate}}
                                        </li>
                                        <li class="full">
                                            发票代码:{{item.invoiceBoxNum}}
                                        </li>
                                    </ul>
                                </div>
                                <hr>
                                <div class="down">
                                    <ul>
                                        <li class="full">税率：{{item.taxRate}}%</li>
                                        <li>税额：{{(item.invoiceTaxAmount*1).toFixed(2)}}元</li>
                                        <li>发票总额(含税):<i>{{(item.invoiceAmount*1).toFixed(2)}}元</i></li>
                                    </ul>
                                </div>
                            </div>
                            
                        </div>
                        <div class="nullData" v-show="!feeTaxList.length">
                            <p>暂无内容</p>
                        </div>
                        <div class="infoBox clearfix" v-show="attachmentExtras.length != 0">
                            <div class="imgGroup"  v-for="item in attachmentExtras" >
                                <img class="wc-preview-img" :src="item.attachmentUrl" alt="加载失败" @click="appShowImg($event, imgExtrasList,index)">
                               
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</template>  
<script type="text/ecmascript-6">
import ApiService from '@/services/API-servies'
import { Tabbar, TabItem ,Cell,TabContainer,TabContainerItem,Button,Popup,DatetimePicker} from 'mint-ui';
import MTabbar from '../foot/Tabbarfoot'
import PopupTable from '../public/popupTable'
  export default {
    created() {
        this.getDetail();
    },
    data() {
      return {
        titNav:[{
            txt:'结算明细',
            status:'1'
        },{
            txt:'发票明细',
            status:'2'
        }],
        settleInfo : {
            settleId:'',
            settleStatus:'',
            invoiceTitle:'',
            totSettleWeight:'',
            totTransAmount:'',
            totOtherAmount:'',
            totSettleAmount:'',
        },
        titActive:'1',
        transList:[],
        transTaxList:[],
        feeTaxList:[],
        attachmentExtras:[],
        attachmentInvoice:[],
        imgExtrasList:[],
        imgInvoiceList:[],

      }
    },
    mounted(){
        setTimeout(() => {
            if(this.$isBrower.isAndroid){
            }else if(this.$isBrower.isIos){
                this.setIosTitleType();
            }
        }, 0);
    },
    methods: {
        getDetail(){
            let settleId = this.$route.query.settleId;
            ApiService.settle.detail({
                settleId:settleId
            }).then((res) =>{
                if(res.meta.retCode === '0'){
                    this.assign(res.data);
                }
            });

            ApiService.settle.viewInvoice({
                settleId:settleId
            }).then((res) =>{
                if(res.meta.retCode === '0'){
                    let _listExtras = res.data.attachmentExtras;
                    let _listInvoice = res.data.attachmentInvoice;
                    let _imgExtrasList = this.imgExtrasList;
                    let _imgInvoiceList = this.imgInvoiceList;
                    for (var i = _listExtras.length - 1; i >= 0; i--) {
                            let rul = 'http://www.chuanqi56.com'+_listExtras[i].attachmentUrl;
                           _listExtras[i].attachmentUrl = rul;
                           _imgExtrasList.push(rul);
                    }
                    for (var i = _listInvoice.length - 1; i >= 0; i--) {
                        let url = 'http://www.chuanqi56.com'+_listInvoice[i].attachmentUrl;
                        _listInvoice[i].attachmentUrl = url;
                        _imgInvoiceList.push(url);
                    }
                    this.attachmentExtras = _listExtras;
                    this.attachmentInvoice = _listInvoice;
                }
            });
           
        },
        onNav(status){
            this.titActive = status;
        },   
        assign(data){
            for(let item in this.settleInfo){
                this.settleInfo[item] = data[item];
            };
            this.transList = data.transList;
            this.transTaxList = data.transTaxList;
            this.feeTaxList = data.feeTaxList;
        },
        //ios 设置头部信息
        setIosTitleType(){
         let params = {
          isReturn: true,
          isSearch: false,
          isTitleSegment:false
         };
         this.$bridge.callhandler('needBarButton', params, (data) => {})
       },
       appShowImg($event,list,index){
            let params = {
                currentIndex:index,
                pickerList:list 
              };
            if(this.$isBrower.isIos){
              this.$bridge.callhandler('LookBigPictureAction', params, (data) => {})
            }
            if(this.$isBrower.isAndroid){
              app.showImg(params);
            }
        }
    },
    filters: {
        status(val){
            if(val == 35){
                return '待开票'
            }else if(val == 40){
                return '已开票'
            }else if(val == 55){
                return '待开票'
            }else if(val == 60){
                return '待收款'
            }else if(val == 65){
                return '已付款'
            }else if(val == 70){
                return '结算完成'
            }
        }
    },
    watch: {

    },
    components: {
      MtTabbar : Tabbar,
      MtTabItem : TabItem,
      mtCell : Cell,
      MtTabContainer : TabContainer,
      MtTabContainerItem : TabContainerItem,
      MTabbar,
      MtButton:Button,
      MtPopup:Popup,
      MtPopupTable:PopupTable,
      MtDatetimePicker:DatetimePicker
    }
  }
</script>

<style scoped lang="less" rel="stylesheet/less">
  @import "~common/less/variable";
  @import "~common/less/modules/waybillDetail.less";
  @import "~common/less/modules/settlementDetail.less";
  @import "~common/less/modules/public.less";
</style>















